<template>
  <div class="all">
    <el-container>
      <div class="main1">
        <el-main >
        <el-card class="box-card" shadow="always">
          <!-- <div slot="header" class="clearfix">
            <span>企业详情</span></span>
          </div>
          <div class="title item">
            企业名称：{{detailInfo.data.BASIC.ENTNAME}}
          </div>
          <div class="text item">
            申请号：{{detailInfo.application_num}}
          </div>
          <div class="text item">
            申请人：{{detailInfo.applicant}}
          </div>
          <div class="text item">
            专利类型：{{detailInfo.patent_type}}
          </div>
          <div class="text item">
            专利评分：{{detailInfo.value_score}}
          </div>
          <div class="text item">
            专利被引数:{{detailInfo.cited_num}}
          </div> -->
          <div class="clearfix">
            <div class="logo">
              <img :src="detailInfo.data.BASIC.ent_log" alt="无log图片">
              <!-- <p>{{detailInfo.data.BASIC.ent_log}}</p> -->
            </div>
            <div>
              <span class="title">{{detailInfo.data.BASIC.ENTNAME}}</span>
              <!-- <span class="num">{{detailInfo.application_num}}</span> -->
              <span class="status">{{detailInfo.data.BASIC.ENTSTATUS}}</span>
              <P>统一社会信用代码:{{detailInfo.data.BASIC.UNISCID}}</P>
               <div class="body">
                <span class="item">企业官网：<a href="detailInfo.data.BASIC.website">{{detailInfo.data.BASIC.website}}</a></span>
                <span class="item">开业日期：<span class="key">{{detailInfo.data.BASIC.ESDATE}}</span></span>
                <span class="item">企业住址：<span class="key">{{detailInfo.data.BASIC.DOM}}</span></span>
                <!-- <span class="item">专利评分：<span class="key">{{detailInfo.value_score}}</span></span>
                <span class="item">专利被引数:<span class="key">{{detailInfo.cited_num}}</span></span> -->
                <!-- <span class="item">代理机构:<span class="key">{{detailInfo.agency}}</span></span> -->

                <!-- <div class="text item">
                  申请人：{{detailInfo.applicant}}
                </div>
                <div class="text item">
                  专利类型：{{detailInfo.patent_type}}
                </div>
                <div class="text item">
                  专利评分：{{detailInfo.value_score}}
                </div>
                <div class="text item">
                  专利被引数:{{detailInfo.cited_num}}
                </div> -->
              </div>
            </div>
            
          </div>
         
        </el-card>
      </el-main>  
      </div>
      
      <el-main>
        <el-tabs type="border-card" >
          <el-tab-pane label="企业概览">
            <!-- 企业概览 -->
            <table class="dataintable">
                <tr>
                  <th>企业名称</th>
                  <td class="title">{{detailInfo.data.BASIC.ENTNAME}}</td>
                  <th>法定代表人</th>
                  <td>{{detailInfo.data.BASIC.FRNAME}}</td>
                </tr>
                <tr>
                  <th>注册号</th>
                  <td>{{detailInfo.data.BASIC.REGNO}}</td>
                  <th>企业类型</th>
                  <td>{{detailInfo.data.BASIC.ENTTYPE}}</td>
                  
                </tr>
                <tr>
                  <th>成立日期</th>
                  <td>{{detailInfo.data.BASIC.ESDATE}}</td>
                  <th>经营状态</th>
                  <td>{{detailInfo.data.BASIC.ENTSTATUS}}</td>
                  
                </tr>
                <tr>
                  <th>登记机关</th>
                  <td>{{detailInfo.data.BASIC.REGORG}}</td>
                  <th>所属地区</th>
                  <td>{{detailInfo.data.BASIC.region_name}}</td>
                  
                </tr>
                <tr>
                  <th>注册地址</th>
                  <td>{{detailInfo.data.BASIC.DOM}}</td>
                  <th>实缴金额(万)</th>
                  <td>{{detailInfo.data.BASIC.RECCAP}}{{detailInfo.data.BASIC.REGCAPCUR}}</td>
                  
                </tr>
                <tr>
                  <th>一般经营项目</th>
                  <td colspan="3">{{detailInfo.data.BASIC.CBUITEM}}</td>
                </tr>
                <tr>
                  <th>国名经济行业分类</th>
                  <td colspan="3">{{detailInfo.data.BASIC.nic_name}}</td>
                </tr>

                <!-- <tr>
                  <th colspan="5">分页代码</th>
                </tr> -->
                </table>
            </el-tab-pane>
          <el-tab-pane label="注册信息">
            <table class="dataintable">
              <tr>
                <th>注册地址</th>
                <td>{{detailInfo.data.BASIC.DOM}}</td>
              </tr>
              <tr>
                <th>注册号</th>
                <td>{{detailInfo.data.BASIC.REGNO}}</td>
              </tr>
              <tr>
                <th>注册资本(万)</th>
                <td>{{detailInfo.data.BASIC.REGCAP}}</td>
              </tr>
              <tr>
                <th>注册币种</th>
                <td>{{detailInfo.data.BASIC.REGCAPCUR}}</td>
              </tr>
            </table>
          </el-tab-pane>
          <el-tab-pane label="引用关系">
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-tab-pane>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import companyAPI from "@/api/chapter/company";

export default {
  data() {
    //定义变量及初始值
    return {
      detailInfo: null,
      basic: null, //接口
      company: {},
    };
  },
  created() {
    //页面渲染之前执行，调用methods定义的方法
    //页面渲染钱调用getDetailInfo
    this.init();
  },
  methods: {
    init() {
      //步骤：1.获取路由路径中的id值
      this.company.name = this.$route.params.id;
      console.log(this.$route.params.id);
      console.log(this.company);
      console.log(this.company.name);
      this.getDetailInfo(this.company);
    },
    //根据api里封装的patentById来获取专利详情数据
    getDetailInfo(company) {
      console.log("getDetailInfo方法");
      console.log(company);
      companyAPI
        .getCompanyInfo(company)
        .then((res) => {
          console.log("this.detailInfo = res.data.data");
          this.detailInfo = JSON.parse(res.data.data); //转了之后要马上赋值，不是永久转换
          this.basic = this.detailInfo.BASIC;
          console.log(this.detailInfo.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>


<style>
.el-container {
  display: block;
}
.title {
  font-size: 25px;
  font-weight: bold;
}

.info {
  font-size: 16px;
}

.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

/* .clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
} */
.clearfix {
  display: flex;
}
.logo {
  width: 128px;
  height: 128px;
  margin-right: 10px;
}
.logo img {
  width: 100%;
}
.status {
  background-color: rgb(226, 225, 216);
  padding: 8px;
  border-radius: 8px;
  color: green;
  margin-left: 5px;
}
.box-card .body .key {
  /* color: rgb(48, 24, 155); */
}
.box-card .body .item {
  margin-right: 20px;
}

/* table样式 */
table.dataintable {
   border: 1px solid #888888;
   border-collapse: collapse;
   font-family: Arial,Helvetica,sans-serif;
   margin-top: 10px;
   width: 100%;
   text-align: center;
}
/* table.dataintable .title {
  background-color: #888888;
} */
table.dataintable th {
   background-color: #CCCCCC;
   border: 1px solid #888888;
   padding: 5px 15px 5px 5px;
   text-align: center;
   /* writing-mode: horizontal-tb; */
   width: 150px;
   height: 80px;
   /* vertical-align: baseline; */
}
table.dataintable td {
   background-color: #EFEFEF;
   border: 1px solid #AAAAAA;
   padding: 5px 15px 5px 5px;
   text-align: center;
   /* vertical-align: text-top; */
}
table.dataintable td:hover {
  background-color: #7e9ba3;
}

.box-card {
  width: 100%;
}
.border-card {
  /* float: left; */
  width: 800px;
  margin-left: -5px;
}
</style>